<template>
  <div class="file-management">
    <div class="file-header">
      <div class="header-title">
        <h1>文件管理</h1>
        <span class="file-count">共 {{ totalFiles }} 个文件</span>
      </div>
      <div class="search-section">
        <div class="search-input">
          <i class="el-icon-search"></i>
          <input type="text" v-model="searchQuery" placeholder="搜索文件..." />
          <i v-if="searchQuery" class="el-icon-close clear-search" @click="searchQuery = ''"></i>
        </div>
        <button class="upload-btn" @click="showUploadDialog">
          <i class="el-icon-upload2"></i>
          <span>上传文件</span>
        </button>
      </div>
    </div>

    <div v-if="searchQuery && Object.keys(groupedFiles).length === 0" class="no-results">
      <i class="el-icon-search"></i>
      <p>未找到与"{{ searchQuery }}"相关的文件</p>
    </div>

    <div class="file-content">
      <template v-for="(group, type) in groupedFiles" :key="type">
        <div class="file-group" v-if="group.length > 0">
          <div class="group-header">
            <div class="group-title">
              <div class="group-icon" :class="'group-icon-' + type">
                <img :src="getFileTypeImage(type)" :alt="type" class="type-icon">
              </div>
              <h3>{{ getTypeLabel(type) }}</h3>
              <span class="group-count">{{ group.length }}</span>
            </div>
            <div class="group-actions">
              <button class="view-all-btn">
                <span>查看全部</span>
                <i class="el-icon-arrow-right"></i>
              </button>
            </div>
          </div>
          <div class="file-cards-container">
            <div class="file-card" v-for="(file, index) in group" :key="index" @click="previewFile(file)">
              <div class="file-card-content">
                <div class="file-icon" :class="'file-icon-' + getFileTypeByName(file.name)">
                  <img :src="getFileTypeImage(getFileTypeByName(file.name))" :alt="file.name" class="type-icon">
                </div>
                <div class="file-info">
                  <div class="file-name">{{ file.name }}</div>
                  <div class="file-details">
                    <span class="file-size"><i class="el-icon-document"></i> {{ file.size }}</span>
                    <span class="file-date"><i class="el-icon-time"></i> {{ file.date }}</span>
                  </div>
                </div>
                <div class="file-actions" @click.stop>
                  <el-dropdown trigger="click">
                    <i class="el-icon-more"></i>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="viewFile(file)">
                          <i class="el-icon-view"></i> 查看
                        </el-dropdown-item>
                        <el-dropdown-item @click="editFile(file)">
                          <i class="el-icon-edit"></i> 编辑
                        </el-dropdown-item>
                        <el-dropdown-item @click="downloadFile(file)">
                          <i class="el-icon-download"></i> 下载
                        </el-dropdown-item>
                        <el-dropdown-item divided @click="deleteFile(file)">
                          <i class="el-icon-delete"></i> 删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- 上传文件对话框 -->
    <el-dialog
        v-model="uploadDialogVisible"
        title="上传文件"
        width="500px"
        :close-on-click-modal="false"
        class="upload-dialog"
    >
      <div class="upload-dialog-content">
        <div class="upload-header">
          <h3>上传文件到项目</h3>
          <p class="upload-desc">支持单个或批量上传，最大支持 50MB 的文件</p>
        </div>

        <div class="upload-area">
          <div class="upload-dropzone" @click="triggerFileInput" @dragover.prevent @drop.prevent="handleFileDrop">
            <i class="el-icon-upload"></i>
            <p>将文件拖到此处，或<span class="click-upload">点击上传</span></p>
            <p class="upload-hint">支持 PDF、Word、Excel、PPT、图片等多种格式</p>
            <input type="file" ref="fileInput" style="display: none" multiple @change="handleFileSelect" />
          </div>

          <div class="upload-file-list" v-if="uploadFiles.length > 0">
            <div class="upload-file-item" v-for="(file, index) in uploadFiles" :key="index">
              <div class="file-info">
                <img :src="getFileTypeImage(getFileTypeByName(file.name))" :alt="file.name" class="type-icon">
                <div class="file-details">
                  <span class="file-name">{{ file.name }}</span>
                  <span class="file-size">{{ formatFileSize(file.size) }}</span>
                </div>
              </div>
              <div class="file-progress">
                <div class="progress-bar">
                  <div class="progress-inner" :style="{width: file.progress + '%'}"></div>
                </div>
                <span class="progress-text">{{ file.status }}</span>
                <i class="el-icon-close" @click="removeFile(index)"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="upload-actions">
          <button class="cancel-btn" @click="uploadDialogVisible = false">取消</button>
          <button class="upload-submit-btn" :disabled="!uploadFiles.length" @click="submitUpload">
            开始上传
          </button>
        </div>
      </div>
    </el-dialog>

    <!-- 文件预览对话框 -->
    <el-dialog
        v-model="previewDialogVisible"
        :title="currentFile?.name || '文件预览'"
        width="70%"
        class="preview-dialog"
    >
      <div class="file-preview-content">
        <div v-if="currentFile?.type === 'image'" class="image-preview">
          <img src="https://via.placeholder.com/800x500" alt="图片预览" />
        </div>
        <div v-else-if="currentFile?.type === 'document'" class="document-preview">
          <iframe src="https://via.placeholder.com/800x500" width="100%" height="500"></iframe>
        </div>
        <div v-else class="generic-preview">
          <i :class="currentFile ? getFileIcon(currentFile.type) : 'el-icon-document'"></i>
          <p>{{ currentFile?.name || '未知文件' }}</p>
          <div class="button-container">
            <button class="view-btn" @click="viewFile(currentFile)">
              <i class="el-icon-view"></i> 查看文件
            </button>
            <button class="edit-btn" @click="editFile(currentFile)">
              <i class="el-icon-edit"></i> 编辑文件
            </button>
            <button class="delete-btn" @click="deleteFile(currentFile)">
              <i class="el-icon-delete"></i> 删除文件
            </button>
            <button class="download-btn" @click="downloadFile(currentFile)">
              <i class="el-icon-download"></i> 下载文件
            </button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 确认删除对话框 -->
    <el-dialog
        v-model="deleteConfirmVisible"
        title="确认删除"
        width="350px"
        :close-on-click-modal="false"
    >
      <p>确定要删除文件 {{ currentDeleteFile?.name }} 吗？</p>
      <div class="dialog-actions">
        <button class="cancel-btn" @click="cancelDelete">取消</button>
        <button class="confirm-btn" @click="confirmDelete">确认删除</button>
      </div>
    </el-dialog>

    <!-- 新增：操作成功提示框 -->
    <el-message :message="successMessage" :type="'success'" v-if="successMessage" @close="successMessage = ''"></el-message>
    <!-- 新增：操作失败提示框 -->
    <el-message :message="errorMessage" :type="'error'" v-if="errorMessage" @close="errorMessage = ''"></el-message>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      searchQuery: '',
      uploadDialogVisible: false,
      previewDialogVisible: false,
      currentFile: null,
      currentDeleteFile: null,
      files: [
        { name: 'UI设计稿.fig', size: '2.5MB', date: '2024-01-15' },
        { name: 'Logo设计.sketch', size: '1.8MB', date: '2024-01-14' },
        { name: '项目文档.pdf', size: '3.2MB', date: '2024-01-13'},
        { name: '产品展示.png', size: '4.2MB', date: '2024-01-11'  },
        { name: 'test.dwg', size: '100KB', date: '2024-01-08'},
        { name: 'main.js', size: '56KB', date: '2024-01-09'},
        { name: 'test.txt', size: '100KB', date: '2024-01-08' },
        { name: 'test.docx', size: '100KB', date: '2024-01-08' },
        { name: 'test.pptx', size: '100KB', date: '2024-01-08' },
        { name: 'test.xlsx', size: '100KB', date: '2024-01-08' },
        { name: 'test.mp4', size: '100KB', date: '2024-01-08' }
      ],
      uploadFiles: [],
      fileInput: null,
      fileTypeImages: {
        design: new URL('@/assets/icons/design.png', import.meta.url).href,
        document: new URL('@/assets/icons/document.png', import.meta.url).href,
        image: new URL('@/assets/icons/image.png', import.meta.url).href,
        code: new URL('@/assets/icons/code.png', import.meta.url).href,
        video: new URL('@/assets/icons/video.png', import.meta.url).href,
        audio: new URL('@/assets/icons/audio.png', import.meta.url).href,
        archive: new URL('@/assets/icons/archive.png', import.meta.url).href,
        pdf: new URL('@/assets/icons/pdf.png', import.meta.url).href,
        word: new URL('@/assets/icons/word.png', import.meta.url).href,
        excel: new URL('@/assets/icons/excel.png', import.meta.url).href,
        ppt: new URL('@/assets/icons/ppt.png', import.meta.url).href,
      },
      fileTypeGroups: {
        'design': ['fig', 'sketch', 'psd', 'ai', 'xd', 'dwg', 'dxf'],
        'document': ['txt', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf', 'rtf', 'odt'],
        'image': ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'tiff'],
        'code': ['js', 'html', 'css', 'ts', 'json', 'php', 'java', 'py', 'c', 'cpp', 'cs', 'rb'],
        'video': ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'],
        'audio': ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a'],
        'archive': ['zip', 'rar', '7z', 'tar', 'gz', 'bz2']
      },
      deleteConfirmVisible: false,
      successMessage: '',
      errorMessage: ''
    }
  },
  computed: {
    groupedFiles() {
      const filtered = this.searchQuery
          ? this.files.filter(file =>
              file.name.toLowerCase().includes(this.searchQuery.toLowerCase()))
          : this.files

      return filtered.reduce((groups, file) => {
        const fileGroup = this.getFileGroup(file.name);
        if (!groups[fileGroup]) {
          groups[fileGroup] = []
        }
        groups[fileGroup].push(file)
        return groups
      }, {})
    },
    totalFiles() {
      return this.files.length
    }
  },
  methods: {
    async viewFile(file) {
      try {
        const response = await axios.get(`http://localhost:8080/api/resources/preview`, {
          params: {
            taskName: file.taskName,
            fileName: file.name
          }
        });
        if (response.status === 200) {
          this.currentFile = { ...file, url: response.data.fileUrl }; // 更新文件对象，添加预览路径
          this.previewDialogVisible = true; // 显示文件预览对话框
        } else {
          this.errorMessage = '预览失败: ' + response.data.message;
        }
      } catch (error) {
        this.errorMessage = '预览失败: ' + error.message;
      }
    },
    showUploadDialog() {
      this.uploadDialogVisible = true
    },
    getTypeLabel(type) {
      const labels = {
        design: '设计文件',
        document: '文档文件',
        image: '图片文件',
        code: '代码文件',
        video: '视频文件',
        audio: '音频文件',
        archive: '压缩文件'
      }
      return labels[type] || '其他文件'
    },
    getFileGroup(filename) {
      const ext = filename.split('.').pop().toLowerCase();
      for (const [group, extensions] of Object.entries(this.fileTypeGroups)) {
        if (extensions.includes(ext)) {
          return group;
        }
      }
      return 'document';
    },
    getFileTypeByName(filename) {
      const ext = filename.split('.').pop().toLowerCase();
      const specificTypeMap = {
        'pdf': 'pdf',
        'doc': 'word', 'docx': 'word',
        'xls': 'excel', 'xlsx': 'excel',
        'ppt': 'ppt', 'pptx': 'ppt',
        'txt': 'text',
        'dwg': 'cad'
      };
      if (specificTypeMap[ext]) {
        return specificTypeMap[ext];
      }
      return this.getFileGroup(filename);
    },
    getFileTypeImage(type) {
      return this.fileTypeImages[type] || this.fileTypeImages.document;
    },
    previewFile(file) {
      this.currentFile = file;
      this.previewDialogVisible = true;
    },
    downloadFile(file) {
      if (!file) return;
      console.log('下载文件:', file.name);
      this.successMessage = `开始下载文件 ${file.name}`;
      // 实际下载逻辑
    },
    renameFile(file) {
      console.log('重命名文件:', file.name);
      // 重命名逻辑
    },
    shareFile(file) {
      console.log('分享文件:', file.name);
      // 分享逻辑
    },
    deleteFile(file) {
      this.currentDeleteFile = file;
      this.deleteConfirmVisible = true;
    },
    confirmDelete() {
      try {
        const index = this.files.findIndex(f => f.name === this.currentDeleteFile.name);
        if (index > -1) {
          this.files.splice(index, 1);
          this.successMessage = `文件 ${this.currentDeleteFile.name} 删除成功`;
        }
        this.deleteConfirmVisible = false;
      } catch (error) {
        this.errorMessage = `删除文件 ${this.currentDeleteFile.name} 时出错: ${error.message}`;
        this.deleteConfirmVisible = false;
      }
    },
    cancelDelete() {
      this.deleteConfirmVisible = false;
    },
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    handleFileSelect(event) {
      const files = event.target.files;
      this.addFilesToUpload(files);
      event.target.value = '';
    },
    handleFileDrop(event) {
      const files = event.dataTransfer.files;
      this.addFilesToUpload(files);
    },
    addFilesToUpload(files) {
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        this.uploadFiles.push({
          file: file,
          name: file.name,
          size: file.size,
          type: this.getFileTypeByName(file.name),
          progress: 0,
          status: '等待上传'
        });
      }
    },
    removeFile(index) {
      this.uploadFiles.splice(index, 1);
    },
    submitUpload() {
      this.uploadFiles.forEach(file => {
        file.status = '上传中...';
        const interval = setInterval(() => {
          if (file.progress < 100) {
            file.progress += 10;
          } else {
            clearInterval(interval);
            file.status = '上传完成';
            setTimeout(() => {
              this.files.unshift({
                name: file.name,
                size: this.formatFileSize(file.size),
                date: new Date().toISOString().split('T')[0]
              });
              if (this.uploadFiles.every(f => f.progress === 100)) {
                setTimeout(() => {
                  this.uploadDialogVisible = false;
                  this.uploadFiles = [];
                  this.successMessage = '文件上传成功';
                }, 500);
              }
            }, 500);
          }
        }, 200);
      });
    },
    getFileIcon(type) {
      const icons = {
        design: 'el-icon-brush',
        document: 'el-icon-document-copy',
        image: 'el-icon-picture-outline-round',
        code: 'el-icon-s-opportunity',
        video: 'el-icon-video-camera',
        audio: 'el-icon-headset',
        archive: 'el-icon-folder-opened'
      }
      return icons[type] || 'el-icon-document';
    },
    formatFileSize(size) {
      if (typeof size === 'string') return size;
      const units = ['B', 'KB', 'MB', 'GB', 'TB'];
      let formattedSize = size;
      let unitIndex = 0;
      while (formattedSize >= 1024 && unitIndex < units.length - 1) {
        formattedSize /= 1024;
        unitIndex++;
      }
      return `${formattedSize.toFixed(1)}${units[unitIndex]}`;
    },
    navigateToFileView(fileName) {
      // 跳转到 FileView 页面，并传递文件名
      this.$router.push({ name: 'FileView', params: { fileName } });
    },
    editFile() {
      this.$router.push({ name: 'FileEdit'});
    },
    viewfile(){
      this.$router.push({ name: 'FileView'});
    }
      }
}
</script>

<style scoped>
.file-management {
  padding: 24px;
  background-color: #f9f9fa;
  min-height: calc(100vh - 60px);
}

.file-header {
  margin-bottom: 24px;
}

.header-title {
  display: flex;
  align-items: baseline;
  margin-bottom: 16px;
}

.header-title h1 {
  font-size: 24px;
  font-weight: 500;
  color: #303133;
  margin: 0;
  margin-right: 12px;
}

.file-count {
  font-size: 14px;
  color: #909399;
}

.search-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.search-input {
  flex: 1;
  position: relative;
  max-width: 400px;
}

.search-input i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #909399;
}

.search-input i.el-icon-search {
  left: 12px;
}

.search-input i.clear-search {
  right: 12px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
}

.search-input i.clear-search:hover {
  background-color: #f0f0f0;
}

.search-input input {
  width: 100%;
  padding: 10px 36px 10px 36px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.search-input input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.upload-btn {
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  font-size: 14px;
}

.upload-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.upload-btn:active {
  transform: translateY(0);
}

.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #909399;
}

.no-results i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-results p {
  font-size: 16px;
  margin: 0;
}

.file-group {
  margin-bottom: 32px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.group-title {
  display: flex;
  align-items: center;
}

.group-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.group-icon i {
  font-size: 20px;
}

.group-icon-design {
  background-color: #fff0f6;
}

.group-icon-design i {
  color: #eb2f96;
}

.group-icon-document {
  background-color: #f0f5ff;
}

.group-icon-document i {
  color: #2f54eb;
}

.group-icon-image {
  background-color: #f6ffed;
}

.group-icon-image i {
  color: #52c41a;
}

.group-icon-code {
  background-color: #fcf4ff;
}

.group-icon-code i {
  color: #722ed1;
}

.group-icon-video {
  background-color: #fff2e8;
}

.group-icon-video i {
  color: #fa8c16;
}

.group-icon-audio {
  background-color: #e6fffb;
}

.group-icon-audio i {
  color: #13c2c2;
}

.group-icon-archive {
  background-color: #fff7e6;
}

.group-icon-archive i {
  color: #fa8c16;
}

.group-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.group-count {
  background-color: #f0f7ff;
  color: #409eff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

.group-actions .view-all-btn {
  background: none;
  border: none;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.group-actions .view-all-btn:hover {
  background-color: #f0f7ff;
}

.file-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
}

.file-card {
  transition: all 0.2s;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  position: relative;
}

.file-card:hover {
  background-color: #f9f9fa;
  z-index: 1;
}

.file-card:active {
  background-color: #f5f5f5;
}

.file-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #409eff;
  transition: width 0.2s ease-in-out;
}

.file-card:hover::before {
  width: 100%;
}

.file-card-content {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  transition: transform 0.3s;
  background-color: transparent;
}

.type-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform 0.3s;
}

.file-card:hover .type-icon {
  transform: scale(1.1);
}

.file-icon i {
  font-size: 20px;
}

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-details {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.file-details i {
  margin-right: 4px;
  font-size: 12px;
  opacity: 0.7;
}

.file-size, .file-date {
  display: flex;
  align-items: center;
}

.file-actions {
  color: #909399;
  cursor: pointer;
  padding: 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.file-card:hover .file-actions {
  opacity: 1;
}

.file-actions i {
  font-size: 16px;
}

/* 文件预览样式 */
.file-preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.image-preview img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}

.document-preview {
  width: 100%;
}

.generic-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.generic-preview i {
  font-size: 64px;
  color: #409eff;
  margin-bottom: 16px;
}

.generic-preview p {
  font-size: 18px;
  color: #303133;
  margin-bottom: 24px;
}

.download-btn {
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* 对话框样式 */
:deep(.upload-dialog .el-dialog__header),
:deep(.preview-dialog .el-dialog__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.upload-dialog .el-dialog__body),
:deep(.preview-dialog .el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

/* 上传对话框样式 */
.upload-dialog-content {
  display: flex;
  flex-direction: column;
}

.upload-header {
  text-align: center;
  margin-bottom: 20px;
}

.upload-header h3 {
  font-size: 18px;
  color: #303133;
  margin: 0 0 8px 0;
}

.upload-desc {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.upload-area {
  margin-bottom: 20px;
}

.upload-dropzone {
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fafafa;
  margin-bottom: 16px;
}

.upload-dropzone:hover {
  border-color: #409eff;
  background-color: #f0f7ff;
}

.upload-dropzone i {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 16px;
}

.upload-dropzone p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
}

.upload-hint {
  font-size: 12px !important;
  color: #909399 !important;
  margin-top: 8px !important;
}

.click-upload {
  color: #409eff;
  font-weight: 500;
}

.upload-file-list {
  margin-top: 16px;
}

.upload-file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 8px;
}

.upload-file-item .file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.upload-file-item .file-info i {
  font-size: 20px;
  color: #409eff;
}

.upload-file-item .file-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.upload-file-item .file-name {
  font-size: 14px;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.upload-file-item .file-size {
  font-size: 12px;
  color: #909399;
}

.upload-file-item .file-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

progress-bar {
  width: 100px;
  height: 6px;
  background-color: #e4e7ed;
  border-radius: 3px;
  overflow: hidden;
}

.progress-inner {
  height: 100%;
  background-color: #409eff;
  border-radius: 3px;
  transition: width 0.3s;
}

.progress-text {
  font-size: 12px;
  color: #909399;
  width: 70px;
  text-align: center;
}

.upload-file-item .el-icon-close {
  color: #c0c4cc;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s;
}

.upload-file-item .el-icon-close:hover {
  background-color: #f0f0f0;
  color: #909399;
}

.upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

.cancel-btn {
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  background-color: white;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn:hover {
  border-color: #c6e2ff;
  color: #409eff;
  background-color: #f0f7ff;
}

.upload-submit-btn {
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-submit-btn:hover {
  background-color: #66b1ff;
}

.upload-submit-btn:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

/* 保留原有的对话框样式 */
:deep(.upload-dialog .el-dialog__header) {
  display: none; /* 隐藏原标题，使用自定义标题 */
}

:deep(.upload-dialog .el-dialog__body) {
  padding: 24px;
}

:deep(.upload-dialog .el-dialog__headerbtn) {
  top: 16px;
  right: 16px;
}

:deep(.upload-dialog .el-dialog) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .file-management {
    padding: 16px;
  }

  .header-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-title h1 {
    margin-bottom: 4px;
  }

  .search-section {
    flex-direction: column;
  }

  .search-input {
    max-width: none;
  }

  .file-cards-container {
    grid-template-columns: 1fr;
  }

  .file-card {
    border-right: none;
  }

  :deep(.preview-dialog .el-dialog) {
    width: 95% !important;
  }

  :deep(.upload-dialog .el-dialog) {
    width: 95% !important;
  }

  .upload-file-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .upload-file-item .file-progress {
    width: 100%;
    margin-top: 8px;
  }

  .progress-bar {
    flex: 1;
  }
}
.view-btn,
.edit-btn,
.delete-btn,
.download-btn {
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin: 5px;
}

.view-btn:hover,
.edit-btn:hover,
.delete-btn:hover,
.download-btn:hover {
  background-color: #66b1ff;
}

.button-container {
  display: flex;
  justify-content: center; /* 水平居中按钮 */
  flex-wrap: wrap; /* 当空间不足时，按钮自动换行 */
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

.cancel-btn {
  padding: 8px 16px;
  border: 1px solid #dcdfe6;
  background-color: white;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn:hover {
  border-color: #c6e2ff;
  color: #409eff;
  background-color: #f0f7ff;
}

.confirm-btn {
  padding: 8px 16px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.confirm-btn:hover {
  background-color: #f78989;
}
</style>